<template>
    <h1>我是 APP 组件</h1>
    <p>{{ this.appMsg }}</p>

    <!--
        子传父 因为单向数据流的原因, 我们只能通过事件传递

        1. 子组件在某一个时机, 通知父组件, 触发一个事件
            我们当前案例中, 是在 子组件的输入框输入了内容的时候通知
        2. 在 父组件使用子组件 的时候, 给子组件绑定一个自定义事件, 一定记得使用 @
            当子组件通知我们出发这个自定义事件的时候, 我们在父组件内有一个对应的函数会触发
            这个函数的参数就是子组件通知父组件时传递的数据
     -->
    <QFInp @componentChange="getMsg" />
</template>

<script>
import QFInp from "./components/qf_inp.vue";
export default {
    data() {
        return {
            appMsg: "",
        };
    },
    components: {
        QFInp,
    },
    methods: {
        getMsg(msg) {
            // console.log(msg)
            this.appMsg = msg;
        },
    },
};
</script>

<style></style>
